<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #outer {
        width: 400px;
        height: 400px;
        border: #f1f1f1 1px solid;
    }
</style>
<body>
<div id="outer">
    <div id="container" onchange="switchArea(event)"></div>
    <div id="container2"></div>
</div>
<script>
    const container = document.getElementById('container')
    const container2 = document.getElementById('container2')
    const cq = ["江北","渝中"]
    const bj = ["朝阳","海淀"]
    function generateSelector(dom,text,value) {
        const option = document.createElement("option")
        option.text = text
        option.value = value
        dom.add(option)
    }
    const selectElement = document.createElement("select")
    generateSelector(selectElement,"重庆","重庆")
    generateSelector(selectElement,"北京","北京")
    const selectElement2 = document.createElement("select")
    generateSelector(selectElement2,"渝中","渝中")
    generateSelector(selectElement2,"江北","江北")
    container.appendChild(selectElement);
    container2.appendChild(selectElement2);
    function switchArea(event) {
        if (event.target.value === '重庆') {
            Array.from(selectElement2.childNodes).forEach((item, index) => {
                item.value = cq[index]
                item.text = cq[index]
            })
        }
        else if (event.target.value === '北京') {
            Array.from(selectElement2.childNodes).forEach((item, index) => {
                item.value = bj[index]
                item.text = bj[index]
            })
        }
    }
</script>
</body>
</html>
